<route lang="json5" type="page">
{
  style: { navigationBarTitleText: '组件例子' },
}
</route>

<template>
  <view class="mt-8 text-center p-4">
    <view class="">
      演示uniapp组件，uview-ui组件，wot组件库的使用
    </view>

<!--    <view class="leading-10">-->
<!--      用户是否已登录：-->
<!--      <text>{{ isLogined ? '是' : '否' }}</text>-->
<!--    </view>-->
<!--    <button v-if="!isLogined" @click="setUserInfo" class="mt-4" type="primary">登陆</button>-->
<!--    <button v-else @click="clearUserInfo" class="mt-4" type="warn">登出</button>-->


    <view class="bg-slate-100 px-4 pt-3">
      <view class="list-container">
        <view v-for="item in routeList" :key="item.path" class="mb-3">
          <view
            class="flex bg-white items-center justify-between p-3 mb-2"
            @click="goDetailPage(item.path)"
          >
            <text class="flex-1 text-4 text-dark">{{ item.title }}</text>
            <text class="i-carbon-chevron-right"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/store'
import pagesJson from '@/pages.json'

const userStore = useUserStore()

const isLogined = computed(() => {
  return userStore.isLogined
})

const setUserInfo = () => {
  userStore.setUserInfo({ nickname: '菲鸽', avatar: '', token: 'abcdef' })
}
const clearUserInfo = () => {
  userStore.clearUserInfo()
}

const handleTitle = (str?: string) => {
  if (!str) {
    return '标题'
  }
  if (/%.*%/.test(str)) {
    return '多语言'
  }
  return str
}
/** 组件库功能 */
const baseDemos = pagesJson.pages
  .filter((e) => e.path.startsWith('pages/comp_demo/') && e.path.indexOf('index') < 0 && !e.hide)
  .map((e) => ({
    title: handleTitle(e.style?.navigationBarTitleText),
    path: e.path,
  }))
const routeList = baseDemos

const goDetailPage = (path: string) => {
  const url = `/${path}`
  uni.navigateTo({
    url,
  })
}

</script>

<style lang="scss" scoped>
//
</style>
